<template>
  <div class="docx-container">
    <div class="file" ref="file"></div>
  </div>
</template>

<script>
import axios from "axios";
import {renderAsync} from "docx-preview";

export default {
  props: {
    url: {
      type: String,
      default: "",
    },
  },

  mounted() {
    this.renderFile();
  },

  watch: {
    url() {
      this.renderFile();
    },
  },

  methods: {
    hasAncestorWithClass(element, className) {
      let currentElement = element.parentElement;
      while (currentElement !== null) {
        if (currentElement.classList.contains(className)) {
          return true;
        }
        currentElement = currentElement.parentElement;
      }
      return false;
    },
    renderFile() {
      axios({
        method: "get",
        responseType: "blob",
        url: this.url,
      }).then((response) => {
        console.log(response);
        renderAsync(response.data, this.$refs.file).then(() => {
          // let elementsByName = document.getElementsByTagName('image');
          // for (let i = 0; i < elementsByName.length; i++) {
          //   let item = elementsByName[i];
          //   let imgArr = item.querySelectorAll('img');
          //   if (this.hasAncestorWithClass(item, 'docx-container') && imgArr.length) {
          //     let imgDiv = item.parentNode.parentNode;
          //     imgDiv.appendChild(imgArr[0]);
          //   }
          // }
        });
      });
    },
  },
};
</script>

<style scoped>
.docx-container ::v-deep .docx-wrapper {
  background-color: #fff;
  padding: 20px 20px;
}
</style>

